<template>
  <div class="chapter">
    <dl v-for="(item, index) in crouseData" :key="index">
      <dt>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconmenu" />
        </svg>
        第{{index + 1}}章&nbsp;
        <span>{{item.title}}</span>
      </dt>
      <dd v-for="(_item, _index) in item.children" :key="_index">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconbofang2" />
        </svg>
        <span>{{index + 1}}-{{_index+1}}&nbsp;{{_item.title}}</span>
        <span v-if="_item.canLook" @click="showPreview" class="canlook">试看</span>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      crouseData: [
        {
          title: "什么是能量守恒",
          children: [
            {
              title: "导学",
              canLook: true,
              videoUrl: ""
            },
            { title: "能量守恒的定义" },
            { title: "能量守恒的特点" },
            { title: "能量守恒的公式" }
          ]
        },
        {
          title: "进阶习题",
          children: [
            {
              title: "导学",
              canLook: true,
              videoUrl: ""
            },
            { title: "习题（1）：透彻地分析" },
            { title: "习题（1）：大展身手" }
          ]
        },
        {
          title: "真题精讲",
          children: [
            {
              title: "导学",
              canLook: true,
              videoUrl: ""
            },
            { title: "14年高考真题（1）：分析题目-1" },
            { title: "14年高考真题（1）：分析题目-2" },
            { title: "14年高考真题（1）：满分解答" },
            { title: "15年高考真题（1）：分析题目-1" },
            { title: "15年高考真题（1）：分析题目-2" },
            { title: "15年高考真题（1）：满分解答" },
          ]
        },
        {
          title: "课程最后",
          children: [
            {
              title: "总结",
              videoUrl: ""
            },
          ]
        }
      ]
    };
  },
  methods: {
    showPreview() {
      this.$emit("showPreview");
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .chapter {
    padding: 20px 0;
    width: 80%;
    dl {
      letter-spacing: 1px;
      dt {
        position: relative;
        height: 20px;
        font-weight: 700;
        font-size: 18px;
        color: #07111b;
        margin: 15px 0;
        .icon {
          position: absolute;
          width: 20px;
          height: 20px;
          left: -30px;
          top: -2px;
        }
      }
      dd {
        padding: 12px 0;
        border-top: 1px solid rgba(28, 31, 33, 0.1);
        line-height: 24px;
        .icon {
          margin-right: 10px;
          vertical-align: middle;
          width: 20px;
          height: 20px;
        }
        .canlook {
          float: right;
          cursor: pointer;
          transition: all 0.2s;
          padding: 0 16px;
          font-size: 12px;
          background: rgba(242, 13, 13, 0.1);
          border-radius: 12px;
          color: #f20d0d;
          font-weight: 700;
          &:hover {
            background: #f20d0d;
            color: #ffffff;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .chapter {
    width: 100%;
    margin: 10px auto !important;
    dl {
      box-sizing: border-box;
      padding: 5px;
      letter-spacing: 1px;
      dt {
        display: flex;
        padding: 5px;
        align-items: center;
        height: 22px;
        font-weight: 500;
        font-size: 16px;
        color: #07111b;
        .icon {
          width: 25px;
          height: 20px;
          left: -30px;
          top: -2px;
        }
      }
      dd {
        font-size: 14px;
        padding: 10px 0;
        border-top: 1px solid rgba(28, 31, 33, 0.1);
        line-height: 24px;
        .icon {
          margin-right: 10px;
          vertical-align: middle;
          width: 15px;
          height: 15px;
        }
        .canlook {
          float: right;
          cursor: pointer;
          transition: all 0.2s;
          padding: 0 16px;
          font-size: 12px;
          background: rgba(242, 13, 13, 0.1);
          border-radius: 12px;
          color: #f20d0d;
          font-weight: 700;
          &:hover {
            background: #f20d0d;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
